<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-09-27 17:16:29
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-11-02 23:58:42
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-27 17:16:29
-->
<template>
  <a-navbar title="icon" left-arrow background="rgb(169, 161, 255)"></a-navbar>
  <view class="iconContain">
    <view v-for="item in iconData" :key="item" class="iconList">
      <a-icon :name="item.name" :color="item.color"></a-icon>
      <text class="desc">{{ item.name }}</text>
    </view>
  </view>
</template>

<script lant="ts" setup>
import iconLIst from "@/assets/iconfont/icon.json";
import { ref } from "vue";

const ada = iconLIst.glyphs.map((item) => {
  return {
    name: item.font_class,
    color: getRandomColor(),
  };
});

function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

const iconData = ref(ada);
</script>

<style lang="scss">
.iconContain {
  display: flex;
  flex-wrap: wrap;
  font-size: 22rpx;
  .iconList {
    width: 25%;
    display: flex;
    padding: 16rpx 0rpx;
    font-size: 18px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .desc {
      font-size: 12px;
      display: inline-block;
      margin-top: 16rpx;
    }
  }
}
</style>
